{% extends webapp_config['LAYOUT'] %}

{% block meta_copydoc %}{% endblock %}

{% block meta_title %}Install {{ snap_title }} for Linux using the Snap Store | Snapcraft{% endblock %}

{% block meta_description %}Get the latest version of {{ snap_title }} for Linux - {{ summary }}{% endblock %}

{% if icon_url %}
  {% block meta_image %}
    {{ icon_url }}
  {% endblock %}
{% endif %}

{% block extra_meta %}
  {% if unlisted %}
    <meta name="robots" content="noindex" />
  {% endif %}
{% endblock %}

{% block meta_schema %}
  <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "SoftwareApplication",
      "name": "{{ snap_title }}",
      "description": "{{ summary }}",
      "datePublished": "{{ last_updated_raw }}",
      {% if screenhots and screenshots|length > 0 %}
      "screenshot": "{{ screenshots[0] }}",
      {% endif %}
      "image": "{{ icon_url }}",
      "operatingSystem": "linux",
      "offers": {
        "price": {% if prices and prices['USD'] %}{{ prices['USD'] }}{% else %}0.00{% endif %},
        "priceCurrency": "USD"
      },
      "author": {
        "@type": "Person",
        "name": "{{ publisher }}"
        {% if website %}, {# the , is within the if to avoid parsing errors #}
        "url": "{{ website }}"
        {% endif %}
      },
      "softwareVersion": "{{ version }}",
      "fileSize": "{{ filesize }}",
      "license": "{{ license }}"
    }
  </script>
{% endblock %}

{% block content %}
  {% if is_preview %}
    <div class="snapcraft-p-sticky sticky-shadow" style="z-index: 100;">
      <div class="row">
        <div class="col-7">
            <p class="u-no-margin--bottom" id="preview-message">You are previewing the listing page for {{package_name}}</p>
        </div>
        <div class="col-5 --dark">
          <div class="u-align--right u-clearfix">
            <button class="p-button--base u-no-margin--bottom js-edit">Edit</button>
            <button class="p-button--neutral u-no-margin--bottom js-revert" disabled="disabled">Revert</button>
            <span class="--dark">
              <button class="p-button--positive u-no-margin--bottom js-save" disabled="disabled">Save</button>
            </span>
          </div>
        </div>
      </div>
    </div>
  {% endif %}
  {% if is_preview %}
    <div class="snapcraft-details-preview">
  {% endif %}
  <div class="p-strip--light is-shallow snapcraft-banner-background">
    {% if is_users_snap and not is_preview %}
      <div class="row js-snap-owner-notification">
        <div class="p-notification--information">
          <p class="p-notification__response">
            Ensure your snap always stays relevant and compelling. <a href="/{{ package_name }}/listing">Update its listing information here</a>.
          </p>
        </div>
      </div>
    {% endif %}
    <div class="row">

      <div class="p-snap-heading">
        {% include 'store/snap-details/_snap_heading_data.html' %}

      {% if not IS_BRAND_STORE %}
        <div class="p-snap-install-buttons">
          <button
            class="p-button--neutral p-snap-install-buttons__versions{% if is_preview %} p-tooltip p-tooltip--btm-right{% endif %}"
            {% if is_preview %}
              aria-describedby="{{ package_name }}-preview-channel-map"
              disabled
            {% endif %}
            data-js="open-channel-map"
            data-controls="channel-map-versions"
            aria-controls="channel-map-versions">
            {{ default_track }}/{{ lowest_risk_available }} {{ version }}&nbsp;&nbsp;<i class="p-icon--contextual-menu"></i>
            {% if is_preview %}
            <span class="p-tooltip__message u-align--center" role="tooltip" id="{{ package_name }}-preview-channel-map">This content is being displayed for preview purposes</span>
            {% endif %}
          </button>
          {% if has_stable %}
            <button
              class="p-button--positive p-snap-install-buttons__install{% if is_preview %} p-tooltip p-tooltip--btm-right{% endif %}"
              {% if is_preview %}
                aria-describedby="{{ package_name }}-preview-channel-map"
                disabled
              {% endif %}
              data-js="open-channel-map"
              data-controls="channel-map-install"
              aria-controls="channel-map-install">
                Install
                {% if is_preview %}
                  <span class="p-tooltip__message u-align--center" role="tooltip" id="{{ package_name }}-preview-channel-map">This content is being displayed for preview purposes</span>
                {% endif %}
            </button>
          {% endif %}
        </div>
      {% else %}
        <div class="p-snap-install-buttons">
          <div class="p-code-copyable">
            <input class="p-code-copyable__input" id="snap-install-stable" value="sudo snap install {{ package_name }}" readonly="readonly">
            <button class="p-code-copyable__action js-clipboard-copy" data-clipboard-target="#snap-install-stable">
              Copy to clipboard
            </button>
          </div>
        </div>
      {% endif %}
        </div>
    </div>
  </div>

  {% if not IS_BRAND_STORE %}
    {% include "store/snap-details/_channel_map.html" %}
  {% endif %}

  {% if screenshots or videos or is_preview %}
    <div class="p-strip--light is-shallow">
      {% include "store/snap-details/_screenshots.html" %}
    </div>
  {% endif %}

  <div class="p-strip is-shallow">
    <div class="row">
      <div class="col-8 u-text-wrap">
        {% if summary or is_preview %}<h4 data-live="summary">{{ summary }}</h4>{% endif %}
        <div data-live="description">{{ description | safe }}</div>
        {% if website or is_preview %}<p><a href="{{ website }}" data-live="website">Developer website</a></p>{% endif %}
        {% if contact or is_preview %}
          <p>
            <a href="{{ contact }}" data-live="contact">Contact {{ publisher }}</a>
          </p>
        {% endif %}
      </div>
      <div class="col-4">
        {% include "store/snap-details/_details.html" %}

        {% if request.path in ["/vlc", "/standard-notes", "/plexmediaserver"] %}
        <h4>Companion apps</h4>
        <ul class="p-list">
          <li class="p-list__item u-no-padding--left">
            <a href="{% if request.path == '/vlc' %}https://apps.apple.com/us/app/vlc-for-mobile/id650377962{% elif  request.path == '/standard-notes' %}https://apps.apple.com/gb/app/standard-notes/id1285392450{% elif request.path == '/plexmediaserver' %}https://apps.apple.com/gb/app/plex-movies-tv-music-more/id383457673{% endif %}" onclick="dataLayer.push({'event' : 'GAEvent', 'eventCategory' : '3rd Party Store Link', 'eventAction' : 'Apple Store', 'eventLabel' : '{{ snap_title }}', 'eventValue' : undefined });">
            <img
              src="https://assets.ubuntu.com/v1/2f2fe1cb-Download_on_the_App_Store_Badge_US-UK_RGB_blk_092917.svg"
              alt="" width="120" height="40">
            </a>
          </li>
          <li class="p-list__item u-no-padding--left">
            <a href="{% if request.path == '/vlc' %}https://play.google.com/store/apps/details?id=org.videolan.vlc{% elif  request.path == '/standard-notes' %}https://play.google.com/store/apps/details?id=com.standardnotes{% elif request.path == '/plexmediaserver' %}https://play.google.com/store/apps/details?id=com.plexapp.android{% endif %}" onclick="dataLayer.push({'event' : 'GAEvent', 'eventCategory' : '3rd Party Store Link', 'eventAction' : 'Google Play Store', 'eventLabel' : '{{ snap_title }}', 'eventValue' : undefined });">
              <img
              src="https://assets.ubuntu.com/v1/75d13896-google-play-badge.png" alt=""
              width="134" height="40">
            </a>
          </li>
        </ul>
        {% endif %}

        {# EMBEDDABLE CARD SECTION - hidden in preview #}
        {% if not is_preview and not IS_BRAND_STORE %}
          <h4>Share this snap</h4>
          <p>Generate an embeddable card to be shared on external websites.</p>
          <p><button class="p-button--neutral js-embedded-card-toggle">Create embeddable card</button></p>

          {% include "store/snap-details/_embedded_card_modal.html" %}
        {% endif %}
      </div>
    </div>
  </div>

  {% if countries or normalized_os %}
    <div data-live="public_metrics_live">
      <div class="u-fixed-width">
        <hr />
      </div>

      <div class="p-strip is-shallow">
        <div class="row {% if normalized_os %}u-equal-height{% endif %}">
          {% if countries %}
            <div class="{% if normalized_os %}col-8{% else %}col-12{% endif %} js-snap-map-holder" data-live="installed_base_by_country_percent">
              <h4>Where people are using {{ snap_title }}</h4>
              <div id="js-snap-map" class="snapcraft-territories"></div>
            </div>
          {% endif %}
          {% if normalized_os %}
            <div class="col-4 js-snap-distro-chart-holder snapcraft-distro-chart-container" data-live="weekly_installed_base_by_operating_system_normalized">
              <h4>Users by distribution (log)</h4>
              <div class="snapcraft-distro-chart is-collapsed">
                <div class="snapcraft-distro-chart__names">
                  {% for distro in normalized_os %}
                  <div class="snapcraft-distro-chart__name" title="{{ distro.name }}">{{ distro.name }}</div>
                  {% endfor %}
                </div>
                <div class="snapcraft-distro-chart__bars">
                  {% for distro in normalized_os %}
                    <div
                      class="snapcraft-distro-chart__bar"
                      style="width: {{ distro.value * 100 }}%"
                    ></div>
                  {% endfor %}
                </div>
              </div>
              {% if normalized_os|length > 10 %}
              <div class="snapcraft-distro-chart__more u-hide u-show--small">
                <a href="/{{ package_name }}" data-js="js-show-more-description">Show more</a>
              </div>
              <div class="snapcraft-distro-chart__less u-hide">
                <a href="/{{ package_name }}" data-js="js-show-less-description">Show less</a>
              </div>
              {% endif %}
            </div>
          {% endif %}
        </div>
      </div>
    </div>
  {% endif %}

  {% if not IS_BRAND_STORE %}
    {% if package_name == "hiri" %}
      {% include "partials/_hiri-case-study.html" %}
    {% else %}
      <div data-js="blog-articles" class="u-hide">
        <div class="u-fixed-width">
          <hr />
        </div>
        <div class="p-strip is-shallow">
          <div class="row">
            <div class="col-3">
              <h3 class="p-heading--four">Related blog posts</h3>
            </div>
          </div>
          <div class="row u-equal-height" data-js="blog-article-list" data-snap="{{ package_name }}">
          </div>
        </div>
      </div>
    {% endif %}
  {% endif %}

  {% if not IS_BRAND_STORE %}
    {% include "store/snap-details/_distro-instructions-for-snap-support.html" %}
  {% endif %}

  {# REPORT SNAP SECTION - hidden in preview #}
  {% if not is_preview and not IS_BRAND_STORE %}
    <div class="u-fixed-width">
      <hr />
    </div>

    <div class="u-fixed-width">
      <p>Is there a problem with {{snap_title}}? <a class="js-modal-open">Report this app</a></p>
    </div>

    {% include "store/snap-details/_report_snap_modal.html" %}
  {% endif %}

  {% if has_publisher_page %}
  <div class="p-strip is-shallow">
      <div class="u-fixed-width u-clearfix">
        <h3 class="p-heading--four u-float-left">More snaps from {{ display_name(publisher, username) }}</h3>
        <a class="p-button--neutral u-float-right" href="/publisher/{{ username }}" title="View all snaps from {{ display_name(publisher, username) }}">View all snaps</a>
      </div>
      {% if publisher_featured_snaps %}
        {% if publisher_featured_snaps[1]%}
          <div class="row u-equal-height">
        {% else %}
          <div class="row">
        {% endif %}
        {% set snap = publisher_featured_snaps[0] %}
        {% include 'partials/_publisher-featured-snap.html' %}
        {% if publisher_featured_snaps[1] %}
          {% set snap = publisher_featured_snaps[1] %}
          {% include 'partials/_publisher-featured-snap.html' %}
        {% endif %}
        </div>
      </div>
      {% endif %}
      {% if publisher_snaps %}
        <div class="p-strip is-shallow">
          <div class="row">
            {% for snap in publisher_snaps %}
              {% set hide_publisher = True %}
              {% set show_summary = True %}
              <div class="col-3">
                {% include "store/_media-object-snap-partial.html" %}
              </div>
            {% endfor %}
          </div>
        </div>
      {% endif %}
    </div>
  {% endif %}
  {% if is_preview %}
    </div>
  {% endif %}

  {% if api_error %}
    <div class="u-fixed-width">
      <div class="p-notification--negative">
        <p class="p-notification__response">
          <span class="p-notification__status">Error:</span> API request failed
        </p>
      </div>
    </div>
  {% endif %}

  {% include "store/snap-details/_templates.html" %}
{% endblock %}

{% block scripts_modules %}
  <script src="{{ static_url('js/modules/clipboard.min.js') }}" defer></script>
{% endblock %}

{% block scripts_includes %}
  <script src="{{ static_url('js/dist/public.js') }}" defer></script>
  {% if is_preview %}
    <script src="{{ static_url('js/dist/publisher.js') }}" defer></script>
  {% endif %}
{% endblock %}

{% block scripts %}
  <script>
    window.addEventListener("DOMContentLoaded", function() {
      Raven.context(function () {
        try {
          snapcraft.public.initExpandableDistroChart();
        } catch (e) {
          Raven.captureException(e);
        }

        {% if not is_preview %}
        try {
          snapcraft.public.screenshots('#js-snap-screenshots');
        } catch(e) {
          Raven.captureException(e);
        }
        {% endif %}

        try {
          snapcraft.public.videos('.js-video-slide');
        } catch(e) {
          Raven.captureException(e);
        }

        try {
          snapcraft.public.snapDetailsPosts('[data-js="blog-article-list"]', '#blog-article-template', '[data-js="blog-articles"]');
        } catch(e) {
          Raven.captureException(e);
        }

        {% if not is_preview and not IS_BRAND_STORE %}
        try {
          snapcraft.public.initReportSnap(
            '{{ package_name }}', '.js-modal-open', '#report-snap-modal',
            document.getElementById('report-snap-form').action
          );
        } catch(e) {
          Raven.captureException(e);
        }

        try {
          snapcraft.public.initEmbeddedCardModal('{{ package_name }}');
        } catch(e) {
          Raven.captureException(e);
        }
        {% endif %}

        {% if countries %}
          try {
            snapcraft.public.map('#js-snap-map', {{ countries | tojson }});
          } catch(e) {
            Raven.captureException(e);
            document.querySelector('.js-snap-map-holder').style.display = 'none';
          }
        {% endif %}

        {% if not IS_BRAND_STORE and channel_map %}
          try {
              snapcraft.public.channelMap('#js-channel-map', {{ package_name|tojson }}, {{ channel_map | tojson }}, "{{ default_track }}");
          } catch(e) {
            Raven.captureException(e);
            document.querySelector('.js-open-channel-map').style.display = 'none';
          }
        {% endif %}

        if (typeof ClipboardJS !== 'undefined') {
          new ClipboardJS('.js-clipboard-copy');
        }

        {% if is_preview %}
          snapcraft.publisher.preview({{ package_name|tojson }});
        {% endif %}
      });
    });
  </script>
{% endblock %}
